<template>
    <div class="goods_list">
        <ul>
            <!--            category_id: 1-->
            <!--            product_id: 1-->
            <!--            product_intro: "120Hz高帧率流速屏/ 索尼6400万前后六摄 / 6.67'小孔径全面屏 / 最高可选8GB+256GB大存储 / 高通骁龙730G处理器 / 3D四曲面玻璃机身 / 4500mAh+27W快充 / 多功能NFC"-->
            <!--            product_name: "Redmi K30"-->
            <!--            product_num: 10-->
            <!--            product_picture: "public/imgs/phone/Redmi-k30.png"-->
            <!--            product_price: 2000-->
            <!--            product_sales: 0-->
            <!--            product_selling_price: 1599-->
            <!--            product_title: "120Hz流速屏，全速热爱"-->
            <li v-for="item in goodsData" :key="item.product_id">
                <router-link :to="{path:'/details',query:{productID: item.product_id}}">
                    <img :src="$target+item.product_picture" :alt="item.product_name">
                    <h2>{{ item.product_name }}</h2>
                    <h3>{{ item.product_title }}</h3>
                    <p>
                        <span>{{ item.product_selling_price }}元</span>
                        <span v-if="item.product_selling_price != item.product_price" class="del">{{ item.product_price }}元</span>
                    </p>
                </router-link>
            </li>
            <li class="more" v-if="isMore" @click="checkMore">
                <router-link to="">
                    浏览更多
                    <i class="el-icon-d-arrow-right"></i>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "GoodsList",
    props: ["goodsData", "isMore"],
    created() {
        console.log(this.goodsData)
    },

    /*
    * 父子组件生命周期
    * 父组件
    *   beforeCreate
    *   created
    *   beforeMount
    * 子组件
    *   beforeCreate
    *   created
    *   beforeMount
    *   mounted
    * 父组件
    *   mounted
    * */
    computed:{
        categoryArr(){
            let arr = [];
            //遍历当前列表中所有的商品
            this.goodsData.forEach((item)=>{
                //判断去重 如果当前商品的分类id在arr中存在 那么就不去执行push的操作
                if(!arr.includes(item.category_id)){
                    //取出商品分类id放入arr中
                    arr.push(item.category_id)
                }
            })
            return arr
        }
    },
    /*updated() {
        console.log("arr,======>",this.goodsData)
    },*/
    methods:{
        //点击浏览更多
        checkMore(){
            console.log("11111",this.categoryArr,this.$categoryArr)
            this.$globalData.$categoryArr = this.categoryArr;
            // this.$router.push("/goods")
            this.$router.push({
                path: "/goods",
                query: {
                    categoryID: this.categoryArr
                }
            })

        }
    }

}
</script>

<style scoped lang="scss">
.goods_list {
    li {
        position: relative;
        float: left;
        padding: 10px 0;
        margin: 0 0 14.5px 13.7px;
        width: 234px;
        height: 280px;
        background-color: #fff;
        transition: all .2s linear;
        z-index: 1;
        &:hover {
            z-index: 2;
            box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
            transform: translate3d(0, -2px, 0);
        }
        &.more {
            text-align: center;
            line-height: 280px;
            font-size: 18px;
            a{
                color: #333;
            }
        }

        img {
            display: block;
            width: 160px;
            height: 160px;
            background: url("../assets/imgs/placeholder.png") no-repeat 50%;
            margin: 0 auto;
        }

        h2 {
            margin: 25px 10px 0;
            font-size: 14px;
            color: #333;
            font-weight: 400;
            text-align: center;

            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        h3 {
            margin: 5px 10px;
            height: 18px;
            font-size: 12px;
            font-weight: 400;
            color: #b0b0b0;
            text-align: center;

            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        p {
            margin: 10px 10px 10px;
            text-align: center;
            color: #ff6700;

            .del {
                margin-left: .5em;
                color: #b0b0b0;
                text-decoration: line-through;
            }
        }
    }
}
</style>